<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card>
            <!-- 搜索与添加 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入内容" v-model="ss">
                        <el-button slot="append" icon="el-icon-search" @click="dian"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="dialogVisible = true">添加用户</el-button>
                </el-col>
            </el-row>
        <!-- 用户列表区域 -->
            <el-table :data="userlist" border stripe>
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column label="姓名" prop="username"></el-table-column>
                <el-table-column label="邮箱" prop="email"></el-table-column>
                <el-table-column label="电话" prop="mobile"></el-table-column>
                <el-table-column label="角色" prop="role_name"></el-table-column>

                <el-table-column label="状态" prop="mg_state">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.mg_state"
                        @change="userStateChanged(scope.row)"
                        ></el-switch>
                    </template>
                </el-table-column>
              <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="xg(scope.row.id)"></el-button>
                        <el-button type="primary" icon="el-icon-setting" size="mini" @click="fen(scope.row)"></el-button>
                        <el-button type="primary" icon="el-icon-delete" size="mini" @click="sc(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 删除提示框 -->
            <el-dialog  title="删除提示" :visible.sync="outerVisible" width="30%">
              <span>删除该用户</span>
                <span slot="footer" class="dialog-footer">
                <el-button @click="outerVisible = false">取 消</el-button>
                <el-button type="primary" @click="scqd">确 定</el-button>
               </span>
            </el-dialog>
          <!-- //分页 -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[1, 5, 10, 15]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="7">
          </el-pagination>
     </el-card>

      <!-- //点击添加出弹框 -->
     <el-dialog title="添加用户" :visible.sync="dialogVisible" width="50%" @close="zxc">
        <!-- //内容区域 -->
    <el-form :model="ruleForm" :rules="rules" 
        ref="ruleForm" label-width="100px">
      <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="mobile">
          <el-input v-model="ruleForm.mobile"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>

<!-- 修改用户 -->
       <el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%">
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
      </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="queding">确 定</el-button>
  </span>
</el-dialog>
  <!-- 分配角色 -->
  <el-dialog
  title="提示"
  :visible.sync="jiyun"
  width="50%">
  <div class="nb">
    <p>当前的用户:{{userinfo.username}}</p>
    <p>当前的角色:{{userinfo.role_name}}</p>
    <p>分配新角色:
       <el-select v-model="chen" placeholder="请选择">
      <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.roleName"
      :value="item.id">
    </el-option>
  </el-select>
    </p>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="jiyun= false">取 消</el-button>
    <el-button type="primary" @click="fpqd">确 定</el-button>
  </span>
</el-dialog>
</div>
</template> 

<script>
// import { addusers } from "@/api/api.js";
import {
  addusers,
  changestatus,
  addUser,
  edituser,
  zxc,
  scLogin,
  roleslist,
  saverole} from "@/api/api.js";
export default {
  data() {
    return {
      options:[],//所有角色数据列表
      chen:'',//选中角色id
      userinfo:{},//分配角色用户信息
      ss: "", //搜索
      outerVisible: false, //删除提示框
      jiyun: false,
      ruleForm: {
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      editForm: {
        //修改
        username: "",
        email: "",
        mobile: ""
      },
      delect: {
        //删除
        id: ""
      },
      editFormRules: {
        username: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }]
      },
      rules: {
        username: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" }
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }]
      },
      editDialogVisible: false,
      dialogVisible: false, //对话框的显示隐藏
      // 获取用户列表的参数对象
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 2
      },
      userlist: [],
      total: 0
    };
  },
  created() {
    this.getUserList();
    // this.userStateChanged();
    // addusers(this.queryInfo).then(res => {
    //   this.userlist = res.data.users;
    //   console.log(res.data.users);
    // });
  },
  methods: {
    // fen() {
    //   //分配角色
    //   this.jiyun = true;
    // },

      // 展示分配角色的对话框
    async fen(userinfo) {
      this.userinfo = userinfo
    // 在展示对话框之前，获取所有角色的列表
      const res= await roleslist()
      if (res.meta.status === 200) {
         this. options = res.data
        this.jiyun = true
      }
     },
      //分配确定
        async fpqd() {
      if (!this.chen) {
        return this.$message.error('请选择要分配的角色！')
      }
       const res = await saverole(
        {
          id:  this.userinfo.id,
          rid: this.chen
        }
      )
      if (res.meta.status === 200) {
         this.$message.success('分配角色成功！')
         this.getUserList()
         this.jiyun = false
      }
    },

    //删除方法
    fdsc() {
      scLogin(this.delect.id).then(res => {
        console.log(res);
      });
    },
    // 删除
    sc(i) {
      this.outerVisible = true;
      console.log(i); //当前行的信息，看文档，把return里面创建好的id把他赋值点谁id
      this.delect.id = i.id;
    },
    //删除确定
    scqd() {
      this.outerVisible = false;
      this.fdsc();
      this.getUserList();
    },
    dian() {
      //搜索
      this.queryInfo = {
        query: this.ss,
        pagenum: 1,
        pagesize: 2
      };
      this.getUserList();
    },
    //修改
    async xg(id) {
      console.log(id);
      const res = await zxc(id);
      if (res.meta.status === 200) {
        this.editForm = res.data;
        this.editDialogVisible = true;
      }
    },
    queding() {
      //修改确定
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return;
        const res = await edituser({
          id: this.editForm.id,
          email: this.editForm.email,
          mobile: this.editForm.mobile
        });
        if (res.meta.status === 200) {
          // this.$message.success(res.meta.msg);
          // 隐藏添加用户的对话框
          this.editDialogVisible = false;
          // 重新获取用户列表数据
          this.getUserList();
        }
        // } else {
        //   // console.log("error submit!!");
        //   return false;
        // }
      });
    },
    add(ruleForm) {
      //添加
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await addUser(this.ruleForm);
          if (res.meta.status === 201) {
            this.$message.success(res.meta.msg);
            // 隐藏添加用户的对话框
            this.dialogVisible = false;
            // 重新获取用户列表数据
            this.getUserList();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    zxc() {
      this.$refs.ruleForm.resetFields();
    },

    handleClose() {},

    //每页改变数量
    handleSizeChange(val) {
      console.log(val);
      this.queryInfo.pagesize = val;
      this.getUserList();
    },
    //当前页改变
    handleCurrentChange(arr) {
      console.log(arr);
      this.queryInfo.pagenum = arr;
      this.getUserList();
    },

    //用户接口
    async getUserList() {
      const res = await addusers(this.queryInfo);
      // console.log(res);
      if (res.meta.status !== 200) {
        return this.$message.error("获取用户列表失败");
      }
      this.userlist = res.data.users;
      this.total = res.data.total;
      this.queryInfo.ss = res.data.users; //搜索
    },

    async userStateChanged(userinfo) {
      console.log(252, userinfo); //当前用户对象
      const res = await changestatus({
        id: userinfo.id,
        status: userinfo.mg_state
      });
      if (res.meta.status === 200) {
        this.$message.success(res.meta.msg);
      }
      //除非提交失败，不能更改状态
      else {
        userinfo.mg_state = !userinfo.mg_state;
        // this.$message.error('修改状态失败')
      }
    }
    // zxc(){
    //   this.$refs.
    // }
  }
};
</script>

 <style lang="scss">
.nb {
  p {
    margin-top: 30px;
    font-size: 20px;
  }
}
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}
.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}
.el-table {
  margin-top: 15px;
  font-size: 12px;
}
</style>
